<template>
  <label class="dragdrop-tool" :for="id" @click="handleSetting" @dragover="handleDragover($event)" @drop="handleDrop($event)">
    <input type="radio" class="dragdrop-tool-radio" name="antzone" :id="id" />
    <ul class="dragdrop-tool-list">
      <li>
        <el-tooltip effect="dark" content="删除" placement="top">
          <el-button size="mini" icon="el-icon-delete" @click.stop="handleDelete()"></el-button>
        </el-tooltip>
      </li>
      <li>
        <el-tooltip effect="dark" content="设置" placement="top">
          <el-button size="mini" icon="el-icon-setting" @click.stop="handleSetting()"></el-button>
        </el-tooltip>
      </li>
      <li>
        <el-tooltip effect="dark" content="锁定" placement="top">
          <el-button size="mini" :icon="lockIco" @click.stop="handleLock()"></el-button>
        </el-tooltip>
      </li>
    </ul>
    <div class="dragdrop-tool-body dragdrop-tool-active" v-show="is_show">
      <p class="dragdrop-tool-tips"> 拖拽至此处</p>
    </div>
  </label>
</template>
<script type="text/javascript">
//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapGetters, mapMutations } = createNamespacedHelpers('cloud')
export default {
  components: {
    //empty
  },
  props: {
    value: [Array, Object],
    index: [String, Number]
  },
  data() {
    return {
      lockIco: "el-icon-unlock",
      lockVal: false
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    data: {
      get: function() {
        return this.value;
      },
      set: function(value) {
        this.$emit('input', value);
      }
    },
    is_show: {
      get: function() {
        if (this.config.slot.length > 0) {
          return false;
        }
        if (this.config.regulation.amount == 0) {
          return false
        } else {
          return true
        }
      },
      set: function(value) {
        return value;
      }
    },
    present() {
      if (this.data.slot[this.index]) {
        return this.data.slot[this.index];
      } else {
        return false
      }
    },
    id() {
      return this._uid;
    }
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    ...mapMutations(['click_layer', 'set_attributes', 'set_pool']),
    /**
     * 锁定图层
     * @return {[type]} [description]
     */
    handleLock() {
      if (this.lockVal) {
        this.lockVal = false;
        this.lockIco = 'el-icon-unlock'
      } else {
        this.lockVal = true;
        this.lockIco = 'el-icon-lock'
      }
      event.returnValue = false;
    },
    /**
     * 鼠标移入事件
     * @return {[type]} [description]
     */
    handleDragover() {
      this.is_show = true;
    },
    /**
     * 鼠标释放
     * @return {[type]} [description]
     */
    handleDrop() {
      this.is_show = false;
    },
    /**
     * 属性设置
     * @return {[type]} [description]
     */
    handleSetting() {
      console.log("dragdrop",this)
      //获取对应组件
      let data = this.data.slot[this.index];
      //重置属性
      let attribute = data.attributes;
      //循环设置数据
      for (let i in attribute) {
        attribute[i].data = data.data
      }
      //数据操作
      this.set_attributes(attribute);
    },
    handleDelete() {
      this.data.slot.splice(this.index, 1);
      this.model.parentNode.removeChild(this.model)
    }
  }
}

</script>
<style type="text/css" lang="scss">
.dragdrop-tool {
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;


  .dragdrop-tool-radio {
    display: none;
  }

  .dragdrop-bourn {
    text-align: center;
    display: block;
    background-color: red;
  }

  .dragdrop-tool-body {
    background-color: #fff;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .dragdrop-tool-mark {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.1);
  }

  .dragdrop-tool-tips {
    font-size: 12px;
    line-height: 100%;
    text-align: center;
    color: #6082a7;
  }

  .dragdrop-tool-active {
    border: 5px solid #fff;
    background-color: #96bade;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
    /* Safari */
    background: linear-gradient(45deg,
      rgba(150, 186, 222, .5) 0, rgba(150, 186, 222, .5) 25%, transparent 25%, transparent 50%,
      rgba(150, 186, 222, .5) 50%, rgba(150, 186, 222, .5) 75%, transparent 75%, transparent);
    background-size: 25px 25px;

  }

  .dragdrop-tool-radio:checked~.dragdrop-tool-body {
    border: 1px solid #6082a7;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;

  }

  .dragdrop-tool-radio:checked~.dragdrop-tool-active {
    border: 1px solid #6082a7;
    padding: 4px;
  }

  .dragdrop-tool-radio:checked~.dragdrop-tool-list {
    display: inline-block;
  }

  .dragdrop-tool-list {
    position: absolute;
    right: 0;
    top: -22px;
    height: 22px;
    width: 140px;
    display: none;
    z-index: 999;

    li {
      padding: 0 2px;
      height: 22px;
      float: right;
      list-style-type: none;
      background-color: #358be0;
    }

    .el-button--mini,
    .el-button--mini.is-round {
      padding: 3px;
      font-size: 12px;
      background: none;
      border: none;
      color: #fff;
    }
  }
}

</style>
